<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>你的眼里有星辰大海</title>
        <link rel="stylesheet" href ="web_ui/css/style.css">
        <link rel="stylesheet" type ="text/css" href = "web_ui/css/reset.css">
    </head>
    <body>
        <div id = "particles-js">
            <div class = "login">
                <div class = "login-top">
                    登录
                </div>
                <div class = "login-center clearfix">
                    <div class = "login-center-img">
                        <img src = "web_ui/img/name.png">
                    </div>
                    <div class = "login-center-input">
                        <input type = "text" id='name' value = ""  autocomplete="off"  placeholder = "请输入您的用户名" />
                        <div class = "login-center-input-text">用户名</div>
                    </div>
                </div>
                <div class = "login-center clearfix">
                    <div class = "login-center-img">
                        <img src = "web_ui/img/password.png">
                    </div>
                    <div class = "login-center-input">
                        <input type = "password" id='pwd' value = "" autocomplete="off"  placeholder = "请输入您的密码" />
                        <div class = "login-center-input-text">密码</div>
                    </div>
                </div>
                <div class = "login-button" onclick="loginroom()"> 登录 </div>
            </div>
            <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
            <script src="js/jquery.min.js"></script>
            <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
            <script>
                    var link_states = false;
                    var ws = {};
                    //链接
                    connect();
                    function connect() {
                        ws = new WebSocket("ws://127.0.0.1:7272");
                        ws.onopen = function () {
                            link_states = true;
                            console.log("连接成功");
                        };
                        //接收到信息开始处理
                        ws.onmessage = function (e) {
                            var data = JSON.parse(e.data);
                            console.log(data);
                            if (data.status == 'false') {
                                layer.msg('账号密码错误');
                            }
                            if (data.status == 'true') {
                                Cookies.set('encode_key', data.msg);
                                Cookies.set('uesr_id', data.uid);
                                var url = './cheat.php';
                                window.location.href = url;
                            }

                        };
                        //链接失败
                        ws.onclose = function () {
                            //连接状态改为false
                            link_states = false;
                            console.log("连接失败，5秒后定时重连");
                            sleep(5000);
                        };
                    }

                    //登录
                    function loginroom() {
                        var name = $("#name").val();
                        var pwd = $("#pwd").val();
                        var data = {"type": "login", "name": name, "pwd": pwd};
                        ws.send(JSON.stringify(data));
                    }


                    //定时发送信息告诉客户端我还活着 避免被踢
                    setInterval(say_hello, 25000);
                    function say_hello() {
                        if (link_states) {
                            ws.send('{"type":"ping"}');
                        }
                    }

                    //定时器
                    function sleep(delay) {
                        setTimeout(connect, delay);
                    }
            </script>
        </div>
    </body>


</html>